<template>
  <div class="single-field-selector">
    <template v-if="labs.length">
      <div class="logic" v-if="labs.length > 1">
        <span>且</span>
      </div>
      <div v-for="(item, index) in labs" :key="index">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              :prop="formProp + '.' + index + '.labFldMap'"
              :rules="{
                required: true,
                message: '字段不能为空',
                trigger: 'change'
              }"
            >
              <el-select
                v-model="item.labFldMap"
                filterable
                clearable
                class="field-selector"
                @change="handleClick($event, index)"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option
                  v-for="item in fieldList"
                  :key="item.fieldNm"
                  :label="item.fieldNm"
                  :value="item.fieldNm"
                ></el-option>
              </el-select>
              <!-- <el-dropdown trigger="click">
                <span class="selector-field">{{ item.labFldMap ? item.labFldMap : '请选择' }}</span>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in fieldList"
                    :key="item.fieldNm"
                    @click.native="handleClick(item, index)"
                  >
                    {{ item.fieldNm }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              :prop="formProp + '.' + index + '.operationType'"
              :rules="{
                required: true,
                message: '运算符不能为空',
                trigger: 'change'
              }"
            >
              <el-select v-model="item.operationType" class="operator" @change="changeType($event, item)">
                <el-option label="---" value=""></el-option>
                <el-option
                  v-for="opera in operatorType('type' + item.valueType)"
                  :key="opera.value"
                  :label="opera.key"
                  :value="opera.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :prop="formProp + '.' + index + '.operationValue'"
              :rules="{
                required: true,
                message: '值不能为空',
                trigger: 'change'
              }"
            >
              <single-filter-content :config="item"></single-filter-content>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              icon="el-icon-plus"
              plain
              circle
              size="mini"
              @click="addFilter(index)"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-close"
              plain
              circle
              size="mini"
              @click="removeFilter(index)"
            ></el-button>
          </el-col>
        </el-row>
      </div>
    </template>
    <p v-else @click="$emit('addFilter')"><i class="el-icon-plus"></i>添加过滤条件</p>
  </div>
</template>

<script>
import operator from '@/views/modules/factory/operator'
import singleFilterContent from '@/views/modules/factory/factory-content-item'
export default {
  components: {
    singleFilterContent
  },
  props: {
    formProp: {
      type: String,
      default: ''
    },
    fieldList: {
      type: Array,
      default: () => []
    },
    labs: {
      type: Array,
      required: true,
      default: () => []
    },
    procTable: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectField: ''
    }
  },
  methods: {
    operatorType(key) {
      return operator[key]
    },
    changeType(type, item) {
      if (item.valueType == '4' || item.valueType == '5') {
        if (type === 'a<=x<b') item.operationValue = []
        else if (type === 8 || type === 9) item.operationValue = [1, '1']
        else item.operationValue = ''
      } else if (item.valueType == '6') {
        if (type === 'a<=x<b') item.operationValue = [1, 1]
        else item.operationValue = ''
      } else if (item.valueType == '7') {
        if (type === 'a<=x<b') item.operationValue = [1.0, 1.0]
        else item.operationValue = ''
      } else {
        item.operationValue = ''
      }
    },
    confirmFilter(item, index) {
      this.config.derivedTag.request.labGrps.labs[index].labTbl = item.labTbl
      this.config.derivedTag.request.labGrps.labs[index].labFldMap = item.labFldMap
      this.config.derivedTag.request.labGrps.labs[index].labId = item.assetCode
      this.config.derivedTag.request.labGrps.labs[index].tagId = item.assetId
      this.config.derivedTag.request.labGrps.labs[index].tagNm = item.assetNm
      this.config.derivedTag.request.labGrps.labs[index].valueType = item.valueType
      this.config.derivedTag.request.labGrps.labs[index].enums = item.enums
      this.config.derivedTag.request.labGrps.labs[index].datTyp = item.dbVal
    },
    addFilter(index = -1) {
      const param = {
        labTbl: this.procTable || this.$parent.$parent.editForm.procTable,
        operationType: '',
        oprator: '',
        datTyp: '',
        valueType: '',
        labFldMap: '',
        operationValue: '',
        val: '',
        valLft: '',
        valRit: '',
        valArray: []
      }
      if (index < 0) this.labs.push(param)
      else this.labs.splice(index + 1, 0, param)
    },
    removeFilter(index) {
      this.labs.splice(index, 1)
    },
    handleClick(item, index) {
      if (item) {
        const target = this.fieldList.find(field => field.fieldNm === item)
        this.labs[index].labFldMap = target.fieldNm
        this.labs[index].valueType = target.valueType
        this.labs[index].datTyp = this.$dictDb('value_type')[target.valueType]
      }
    }
  }
}
</script>

<style lang="scss">
.single-field-selector {
  padding: 20px 100px;
  margin-bottom: 10px;
  background-color: #f5f5f5;
  position: relative;
  .el-form-item {
    display: inline-block;
    width: 100%;
    margin-right: 10px;
    margin-bottom: 15px;
  }
  .el-form-item__content {
    // height: 28px !important;
    line-height: normal;
  }
  .el-select {
    width: 100%;
  }
  .el-input__inner {
    color: #6a86cc;
    background-color: #e6eeff;
    &:hover {
      border-color: #6a86cc;
    }
  }
  .el-input__icon {
    line-height: 28px;
  }
  .filter-item {
    .el-button {
      width: 18px;
      height: 18px;
      margin-left: 10px;
      padding: 1px;
      display: none;
    }
    & + .filter-item {
      margin-top: 10px;
    }
    &:hover {
      .el-button {
        display: inline-block;
      }
    }
  }
  .el-dropdown {
    width: 100%;
  }
  .logic {
    font-size: 12px;
    width: 80px;
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    span {
      display: inline-block;
      font-size: 12px;
      width: 25px;
      height: 25px;
      line-height: 25px;
      border-radius: 50%;
      padding: 0 !important;
      text-align: center;
      color: #fff;
      background-color: #c3813f;
      position: absolute;
      top: calc(50% - 10px);
      left: 10px;
      margin-top: -12.5px;
    }
    &:before {
      width: 50px;
      height: calc(50% - 20px);
      content: '';
      border-width: 3px;
      border-top: 1px solid #c3813f;
      border-left: 1px solid #c3813f;
      position: absolute;
      top: 8px;
      bottom: 50%;
      left: 22.5px;
    }
    &:after {
      width: 50px;
      height: calc(50% - 32.5px);
      content: '';
      border-bottom: 1px solid #c3813f;
      border-left: 1px solid #c3813f;
      position: absolute;
      bottom: 30px;
      left: 22.5px;
    }
  }
  .el-date-editor,
  .el-date-editor.el-input,
  .el-date-editor .el-input__inner {
    width: 100%;
  }
  .el-range-input {
    color: #6a86cc;
    background-color: transparent;
  }
  .el-input-number {
    width: 100%;
    .el-input__inner {
      width: 100%;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    display: none;
  }
  .normal {
    width: 45%;
  }
  .selector-field {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    text-align: center;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    color: #6a86cc;
    background-color: #e6eeff;
    cursor: pointer;
  }
  p {
    padding: 20px;
    margin: 10px 0;
    border: 1px solid $border-color;
    text-align: center;
    cursor: pointer;
    i {
      margin-right: 10px;
    }
  }
  .el-button {
    margin-top: 5px;
  }
  .field-selector .el-input__inner {
    text-align: center;
  }
}
</style>
